<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<title>Student Info</title>

	<!-- bootstrap的css核心，定义了很多class -->
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<!--生成弹框、提示框、下拉菜单  -->
	<script type="text/javascript" src="/bootstrap/popper.min.js"></script>
	<!--bootstrap的js、用于响应事件  -->
	<script type="text/javascript" src="/bootstrap/bootstrap.min.js"></script>
	<link href="/css/style.css" rel="stylesheet" type="text/css" media="all"/>
	<!-- 先引入 Vue -->
	<script src="../js/vue.js"></script>
	<!--引入axios -->
	<script src="../js/axios.js"></script>

<!-- for-mobile-apps -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Personal Profile Form Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<link href='//fonts.googleapis.com/css?family=Questrial'
	rel='stylesheet' type='text/css'>
<link
	href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
	rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/j-forms.css">
<link href="css/style2.css" rel="stylesheet" type="text/css" media="all" />
<!-- bootstrap的css核心，定义了很多class -->
<link rel="stylesheet" type="text/css"
	href="bootstrap/bootstrap.min.css" />
<!--jquery文件  -->
<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--生成弹框、提示框、下拉菜单  -->
<!--<script type="text/javascript" src="bootstrap/popper.min.js"></script>-->
<!--bootstrap的js、用于响应事件  -->
<!--<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>-->

	<div>
		<div id="navigationBar" >
			<div class="header-bottom">
				<div class="container">
					<nav class="navbar navbar-default">
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse nav-wil"

							 id="bs-example-navbar-collapse-1">
							<nav class="cl-effect-1" id="cl-effect-1">
								<ul class="nav navbar-nav" style="flex-direction:row;">
									<!--<li><a href="#home" class="active" data-hover="Home">首页</a></li>
                                    <li><a href="#about" class="scroll" data-hover="About">关于</a></li>-->
									<!--<li><a href="#services" class="scroll" data-hover="Services">私教课程</a></li>-->
									<li>
									<div class="logo">
										<h1>
											<a class="navbar-brand" href="/index.html">yoga</a>
										</h1>
									</div>
									</li>
									<li><a href="/index.html" class="scroll" data-hover="student">学员风采</a></li>
									<li v-if="roles != 0"><a href="/ClubMap.html"
															 class="scroll" data-hover="Team">场馆地图</a></li>
									<li v-if="roles != 0"><a href="/CoachMap.html"
															 class="scroll" data-hover="Team">教练地图</a></li>
									<li v-if="roles == 1||roles == 2"><a href="/student/showMe"
																		 class="scroll" data-hover="Team">学员信息完善</a></li>
									<li v-if="roles == 1||roles == 3"><a href="/coach/showMe"
																		 class="scroll" data-hover="Team">教练信息完善</a></li>
									<li v-if="roles == 1||roles == 4"><a
											href="/yogaclub/showMe" class="scroll" data-hover="Team">场馆信息完善</a></li>
									<li><a href="#gallery" class="scroll" data-hover="Projects">会馆图片</a></li>
									<li v-if="roles == -1"><a href="/login.html" class="scroll"
															  data-hover="login">登陆</a></li>
									<li v-if="roles == -1"><a href="/register.html"
															  class="scroll" data-hover="register">注册</a></li>
									<li v-if="roles == 5"><a href="/adminindex.html"
															 class="scroll" data-hover="register">管理</a></li>
									<li
											v-if="roles == 1||roles == 2||roles == 3||roles == 4||roles ==5"><a
											href="/logout">注销</a></li>
									<li>
										<button class="btn btn-default " type="button"
												id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
												aria-expanded="true"
												style="opacity: 0.5; background-color: #4CAF50;"
												v-if="roles == 4">
											我 <span class="caret"></span>
										</button>
										<ul class="dropdown-menu" style="opacity: 0.5"
											v-if="roles == 4">
											<li><a href="#">我的主页</a></li>
											<li><a href="/html/chat.html">信息中心</a></li>
										</ul>
										<button class="btn btn-default dropdown-toggle" type="button"
												id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
												aria-expanded="true" style="opacity: 0.5;" v-if="roles == 3">
											我 <span class="caret"></span>
										</button>
										<ul class="dropdown-menu" aria-labelledby="dropdownMenu2"
											style="opacity: 0.5" v-if="roles == 3">
											<li><a href="/orderShowCoach.html">我的订单</a></li>
											<li><a href="/coachmes.html">我的详情</a></li>
											<li><a href="/pocket.html">我的钱包</a></li>
											<li><a href="/html/chat.html">信息中心</a></li>
										</ul>
										<button class="btn btn-default dropdown-toggle" type="button"
												id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
												aria-expanded="true" style="opacity: 0.5;" v-if="roles == 2">
											我 <span class="caret"></span>
										</button>

										<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"
											style="opacity: 0.5" v-if="roles == 2">
											<li><a href="/orderShowStudent.html">我的订单</a></li>
											<li><a href="/pocket.html">我的钱包</a></li>
											<li><a href="/html/chat.html">信息中心</a></li>
										</ul>
									</li>
								</ul>
							</nav>
						</div>


						<div class="collapse navbar-collapse nav-wil">
							<div class="cl-effect-1" id="cl-effect-2"></div>
						</div>
						<!-- /.navbar-collapse -->
					</nav>
				</div>
			</div>
		</div>
	</div>

</head>
<body>

	<div class="content">
		<h1 style="color: red;">我的钱包</h1>
		<div class="main w3l">

			<div class="im-g">
				<img src="image/3.jpg" width="120px" height="120px">
			</div>
			<div class="container" id="showMoney">
				<h1 class="display-1">0.00</h1>
			</div>
			<div class="container">
				<table class="table table-striped ">
					<thead align="center">
						<tr>
							<th><button type="button" class="btn btn-success"
									onclick="openPay()">¥ 充值</button></th>
							<th><button type="button" class="btn btn-success"
									onclick="openWithdrawal()">¥ 提现</button></th>
						</tr>
					</thead>
					<tbody align="center">
						<tr>
							<td><button type="button" class="btn btn-danger" onclick="bankCard()">
									银行卡</button></td>
							<td><button type="button" class="btn btn-danger"
									onclick="openPocket()">开通钱包</button></td>
						</tr>
						<tr>
							<td>
								<button type="button" class="btn btn-info">交易记录</button>
							</td>
							<td>
								<button type="button" class="btn btn-info" onclick="card()">绑定银行卡</button>
							</td>
						</tr>
					</tbody>

				</table>
				<div id="yincang">
					
					<!--加载隐藏页面  -->
					
				</div>
			</div>
		</div>
<div id="showBank" >

</div>
<div id="uuid">
</div>
	</div>
	<script>
		$(document).ready(function() {
			showMoney();
		});
		function showMoney() {
			$.ajax({
				url : "/pocket/showPocket",
				type : "get",
				data : {},
				success : function(data) {
					if(data.puid==0){
						var content = "";
						content += '<h1 class="display-1">你还未开通钱包！</h1><h1 class="display-1">请点击开通钱包！</h1>';
						$("#showMoney").html(content);
						
					}else{

						var content = "";
						content += '<h1 class="display-1">余额：' + data.money
								+ '.00</h1>';
						$("#showMoney").html(content);
						var content1="";
						content1+='<input type="hidden" value="'+data.bankcard+'" id="showBankNum">';
						$("#showBank").html(content1);
						
						var content2="";
						content2+='<input type="hidden" value="'+data.puid+'" id="puid">';
						$("#uuid").html(content2);
					}
					
					

				}

			});
		}

		function pocket() {
			$.ajax({
				url : "/pocket/openPocket",
				type : "post",
				data : {
					pass : $("#pass1").val()
				},
				success : function(data) {
					$("#tishi1").html(data);
					if(data.indexOf('成功')!=-1){
						alert(data);
						location.reload();
					}
				}
			});
		}
		function bindingBankCard() {

			$.ajax({
				url : "/pocket/bindingBankCard",
				type : "post",
				data : {
					pass : $("#passb").val(),
					bankcard : $("#bankCardNum").val()
				},
				success : function(data) {
					$("#tishi2").html(data);
					if(data.indexOf("成功")!=-1){
						alert(data);
						location.reload();
					}
				}
			});
		}

		function withdrawal() {

			$.ajax({
				url : "/pocket/withdrawal",
				type : "post",
				data : {
					pass : $("#passt").val(),
					money : $("#outMoney").val()
				},
				success : function(data) {
					$("#tishi4").html(data);
					if(data.indexOf('成功')!=-1){
						alert("提现成功！");
						location.reload();
					}
					
				}
			});
		}

		function card() {
			var content = "";
			content +='<div class="alert alert-success alert-dismissible">'
			+'<strong>绑定银行卡</strong>'
			+'<div class="form-group">'
			+'<input type="text" class="form-control" id="bankCardNum"'
			+'placeholder="请输入银行卡号"> <input type="password"'
			+'class="form-control" id="passb" placeholder="请输入支付密码">'
			+'<button type="button" class="btn btn-success"'
			+'onclick="bindingBankCard()">确认绑定</button>'
			+'<div style="color: red;" id="tishi2"></div>'
			+'</div>'
			+'<button type="button" class="close" data-dismiss="alert">&times;</button>'
			+'</div>';
			$("#yincang").html(content);
		}
		function bankCard() {
			var content = "";
			content +='<div class="alert alert-success alert-dismissible">'
			+'<strong>已绑定银行卡</strong>'
			+'<div class="form-group">'
			+'<input type="text" class="form-control"  disabled="disabled" '
			+'value="'+$("#showBankNum").val()+'"> '
			+'<button type="button" class="close" data-dismiss="alert">&times;</button>'
			+'</div>';
			$("#yincang").html(content);
		}

		function openPay() {
			var content = "";
			content += '<div class="alert alert-success alert-dismissible">'
			+'<strong>余额充值</strong>'
			+'<div class="form-group">'
			+'<form action="/pocket/pay">'
			+'<input type="text" class="form-control" id="payMoney"'
			+'placeholder="请输入充值金额" name="money">'
			+'<input type="hidden" class="form-control" '
			+'value="'+$("#puid").val()+'" name="puid">'
			+'<button type="submit" class="btn btn-success">确认并充值</button>'
			+'</form>'
			+'</div>'
			+'<button type="button" class="close" data-dismiss="alert">&times;</button>'
			+'</div>';
			$("#yincang").html(content);
		}

		function openWithdrawal() {
			var content = "";
			content += '<div class="alert alert-success alert-dismissible">'
			+'<strong>余额提现</strong>'
			+'<div class="form-group">'
			+'<input type="text" class="form-control" id="outMoney"'
			+'placeholder="请输入提现金额"> <input type="password"'
			+'class="form-control" id="passt" placeholder="请输入支付密码">'
			+'<button type="button" class="btn btn-success"'
			+'onclick="withdrawal()">确认并提现</button>'
			+'<div style="color: red;" id="tishi4"></div>'
			+'</div>'
			+'<button type="button" class="close" data-dismiss="alert">&times;</button></div>';
			$("#yincang").html(content);
		}

		function openPocket() {
			var content = "";
			content += '<div class="alert alert-success alert-dismissible">'
			+'<strong>开通钱包</strong>'
			+'<div class="form-group">'
			+'<input type="password" class="form-control" id="pass1"'
			+'placeholder="请设置交易密码">'
			+'<button type="button" class="btn btn-success" onclick="pocket()">确认开通</button>'
			+'<div style="color: red;" id="tishi1"></div>'
			+'</div>'
			+'<button type="button" class="close" data-dismiss="alert">&times;</button>'
			+'</div>'
			$("#yincang").html(content);
		}

		new Vue({
			el: "#navigationBar",
			data: {roles: ""},
			beforeCreate: function () {
				var temp = this;
				axios.get("/user/getRoles").then(function (value) {
					temp.roles = value.data
				});
			}
		})
	</script>


</body>
</html>
